<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
 <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
 <meta HTTP-EQUIV="expires" CONTENT="0">
<title>live list</title>
<script src="javascripts/flowplayer-3.1.4.min.js" type="text/javascript"></script>
<script src="javascripts/swfobject_modified.js" type="text/javascript"></script>
<script src="javascripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="javascripts/swfobject.js"></script>
<script type="text/javascript" src="javascripts/recorder.js"></script>
<script type="text/javascript" src="javascripts/wami-gui.js"></script>
</head>
<script language="javascript">

var iplayer = null;
function play(file_name) {
    if (file_name) {
        $("#player").attr('href', 'http://192.168.0.201:3339/live/id/' + file_name);
    }
    if (iplayer != null) {
        iplayer.stop();
    }
    iplayer = flowplayer("player", "swf/flowplayer-3.1.4.swf",{
        clip: {
             live: true,
             bufferLength: 0 
        },
    } );
}

function cancel(task_id) {
    $.ajax({
        url: 'http://192.168.0.201:3339/action/cancel_task?task_id='+task_id,
        dataType: "jsonp",
        success: function(data) {
            if (data.ret) {
                alert("取消任务" + task_id + "失败");
            }
        },
        error: function() {
            alert("调用取消任务接口失败");
        }
    });
}

function query_stream_list() {
    $.ajax({
        url: 'http://192.168.0.201:3339/manager/info/task_list',
        dataType: "jsonp",
        success: function(data) {
            if (data.ret) {
                alert('获取直播列表失败 ret=' + data.ret);
                return;
            }
            $('#list').empty();
            if (0 == data.list.length) {
                $('#list-block').addClass('hide');
                if (iplayer) {
                    $("#player").attr('href', '');
                    iplayer.stop();
                }   
                return;
            }
            for (var i = 0; i < data.list.length; i++) {
                var task = data.list[i];
                var tr = '<tr><td>'+ i + '</td><td>' + task.task_id + '</td><td>'+ task.progress+'</td>' + 
                    '<td><button class="cancel" data="' + task.task_id + '" >取消</button></td></tr>';
                for (var j = 0; j < task.outputs.length; j++) {
                    var output = task.outputs[j];
                    tr += '<tr><td></td><td>output</td><td>' + output.file_name + '</td><td><button class="play" data="'+output.file_name+'">播放</button></td></tr>';
                }
                $('#list').append($(tr));
            }
            $('button.play').click(function() {
                play($(this).attr('data'));
            });
            $('button.cancel').click(function() {
                cancel($(this).attr('data'));
            });
            if (data.list.length > 0 && $("#player").attr('href') == "") {
                play(data.list[0].outputs[0].file_name);
            }
        },
        error: function() {
            return;
        }
    });
    setTimeout(query_stream_list, 1000);
}

$(document).ready(function() {
play(null);
query_stream_list();
$("#btn_create_task").click(function() {
    var url = "http://192.168.0.201:3339/action/create_task?random_seed=x1b2c25mmp&hash_key=a196bcb3e90f8199a364fa58e40a2052";
    url += "&output_tag=" + $("#txt_output_tag").val();
    var val = $("#txt_input_file_name").val();
    if (val) {
        url += "&input_file_name=" + val;
    }
    val = $("#txt_output_file_name").val();
    if (val) {
        url += "&output_file_name=" + val;
    }
    //alert(url);
    var counts = $("#counts").val();
    if(counts>0)
    {
    	for(var i=0;i<counts;i++)
    	{

		    $.ajax({
		        url: url,
		        success: function(json_data) {
		            //alert("ret: " + json_data.ret + ", task_id:" + json_data.task_id);
		        }
		    });
	        	
    	}
    }
    
});

});


</script>
<body>
<div id="page" >

<div align="center" >
    <div id="video" >
	<a href="" style="display: none; width: 520px; height: 330px" id="player"></a> 
    </div>

</div>

<div id="create_task_test" >
    <form accept-charset="UTF-8" action="http://192.168.0.201:3339/action/upload_file_task?output_tag=for_tcp_input_both" enctype="multipart/form-data" method="post"><div style="margin:0;padding:0;display:inline"></div>
        <p><label for="upload_file">选择本地文件</label> : 
        <input id="upload_datafile" name="file_name" type="file" />
      <!--  <select id="upload_target_format" name="format"><option value="">Please select</option>
            <option value="mp4">mp4</option>
            <option value="ts">ts</option>
        </select>
        -->
    <input name="commit" type="submit" value="上传转码" />
    <div>
      		转码文件: <input type="text" id="txt_input_file_name" size = 80 value="/dev/video/halibote.mp4"></input>
   			输出格式: <input type="text" id="txt_output_tag" value="transcode_m3u8_sd"></input>
       		输出文件名: <input type="text" id="txt_output_file_name" value=""></input>
       		并发次数: <input type="text" id="counts" value="10"></input>
        <input type="button" id="btn_create_task" value="转码服务器文件">
    </div>
</form>
</div>

<table id="list" border="1">
<tr><td>ID</td><td>Stream ID</td><td>Progress</td><td>Cancel</td></tr>
</table>
</div>

</body>
</html>

